<template>
    <div class="video-preView" v-loading="isLoading">
        <span class="video-tree">
            <div class="video-tree-input">
                <el-input v-model="monitorSearchValue" placeholder="搜索监控通道"></el-input><el-button @click="search" type="primary">搜索</el-button>
            </div>
            <div class="video-device">
                <span class="video-sum-device">设备总数：{{monitorTotalList.length}}台</span
                ><span class="video-device-list">
                    <div style="color: #70B603">在线：{{monitorTotalList.length}}台</div>
                    <div style="color: #D9001B">异常：0台</div>
                    <div style="color: #999">离线：0台</div>
                </span>
            </div>
            <div class="monitor-ul">
                <div @click="monitorBtn(item)" :class="monitorObj[item.camera_id] ? 'monitor-item-active':'monitor-item'" v-for="(item, $index) in monitorList" :key="this">{{item.name}}</div>
            </div>
        </span
        ><span class="video-play">
            <div class="video-play-select">
                <div class="select-main">方案选择：
                    <el-select v-model="planInfo" placeholder="请选择方案" @change="checkPlan">
                        <el-option label="请选择方案" value=""></el-option>
                        <el-option
                          v-for="(item, $index) in planList"
                          :key="item.id"
                          :label="item.name"
                          :value="item">
                          <div style="display: flex;justify-content: space-between;align-items: center;">
                              <span>{{ item.name }}</span>
                              <span style="display: flex;align-items: center;">
                                  <i style="cursor: pointer;font-size: 18px;margin-left: 10px;" @click.stop="editPlan(item, $index)" class="el-icon-edit-outline"></i>
                                  <i style="cursor: pointer;font-size: 18px;margin-left: 10px;" @click.stop="delPlan(item, $index)" class="el-icon-delete"></i>
                              </span>
                          </div>
                        </el-option>
                    </el-select>
                </div>
                <el-button @click="savePlan" type="primary">{{!planInfo ? '保存方案': '更新方案'}}</el-button>
            </div>
            <div class="video-list" id="video-list">
                <div id="division" :class="segmentation == 4 ? 'division-two': segmentation == 9 ? 'division-three': segmentation == 16 ? 'division-four':'division-five'">
                    <div
                        v-loading="item && item.isLoading === true"
                        :class="[monitorIndex === $index ?'monitor-item-active':'', item && item.camera_id ? 'monitor-after-none':'']"
                        v-for="(item, $index) in monitorArr"
                        @click="monitorItemBtn($index, 4)"
                        @dblclick="monitorCheck(item)">
                        <div class="division-item-tips" v-show="!item || !item.camera_id">单击选中分屏，双击选中监控点</div>
                        <video :id="'video'+$index" class="video-js vjs-default-skin vjs-big-play-centered"></video>
                        <div class="video-error" @click.stop="retry(item, $index)" v-if="item && item.isLoading === 'error'">视频错误</div>
                    </div>
                </div>
                <div class="monitor" id="monitor" v-show="isShow" v-loading="monitorLoading === true">
                    <video id="monitor0" class="video-js vjs-default-skin vjs-big-play-centered"></video>
                    <i class="el-icon-close" @click="closeMonitor"></i>
                    <div class="monitor-error" @click="monitorRetry" v-if="monitorLoading === 'error'">视频错误</div>
                </div>
            </div>
            <div class="picture-segmentation">
                <el-popover
                    placement="top-start"
                    title=""
                    width="200"
                    trigger="hover">
                    <div class="division-main">
                        <div class="division" @click="segmentationBtn(4)">
                            <div class="division-two">
                                <div v-for="item in 4"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(9)">
                            <div class="division-three">
                                <div v-for="item in 9"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(16)">
                            <div class="division-four">
                                <div v-for="item in 16"></div>
                            </div>
                        </div>
                        <div class="division" @click="segmentationBtn(25)">
                            <div class="division-five">
                                <div v-for="item in 25"></div>
                            </div>
                        </div>
                    </div>
                    <div slot="reference" class="segmentation-icon">
                        <i class="el-icon-s-grid"></i>
                        <div>画面分割</div>
                    </div>
                </el-popover>
            </div>
        </span>
        <el-dialog
            :title="planEdit ? '修改方案' : '新增方案'"
            :visible.sync="dialogVisible"
            width="30%"
            v-loading="dialogLoading">
            <el-form :model="plan" ref="plan" label-width="100px">
                <el-form-item
                    label="方案名称"
                    prop="name"
                    :rules="[
                        { required: true, message: '请输入方案名称', trigger: 'blur' }
                    ]">
                    <el-input v-model="plan.name" placeholder="请输入方案名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePlanConfirm('plan')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import videojs from "video.js";
    import 'video.js/dist/video-js.css';
    import flvjs from '../../../utils/js/flv.js';
    export default {
        data() {
            return {
                isLoading: false,
                monitorTotalList: [],
                monitorList: [],
                monitorObj: {},
                monitorSearchValue: '',
                planList: [],
                monitorArr: [],
                player: [],
                monitorIndex: '',
                segmentation: 4,
                isShow: false,
                planEdit: false,
                dialogVisible: false,
                plan: {
                    name: ''
                },
                planInfo: '',
                planIndex: 0,
                hideDropdown: false,
                dialogLoading: false,
                monitorer: null,
                monitorLoading: false,
                live_addr: ''
            }
        },
        created() {
            // this.isLoading = true;
            // 监控点列表
            this.monitorArr.length = 4;
            this.player.length = 4;
            // let monitor = this.$http.get('api/v1/security/monitor')
            // .then((res) => {
            //     this.monitorList = res.data;
            //     this.monitorTotalList = res.data;
            // })
            // .catch(() => {})

            // 方案列表
            // let plan = this.$http.get('api/v1/security/plan/')
            // .then((res) => {
            //     this.planList = res.data;
            // })
            // .catch(() => {})
            // this.isLoading = true;
            // this.$http.requestAll([monitor, plan])
            // .then(() => {
            // this.isLoading = false;
            // })
        },
        beforeDestroy() {
            this.player.forEach((v, i) => {
                if(v) {
                    this.pausemix(this.player, i);
                }
            })
            if(this.monitorer) {
                this.pausemix();
            }
        },
        methods: {
            // 搜索
            search() {
                if(this.monitorSearchValue) {
                    let arr = [];
                    this.monitorTotalList.forEach((v, i) => {
                        if(v.name.indexOf(this.monitorSearchValue) != -1) {
                            arr.push(v);
                        }
                    })
                    this.monitorList = arr;
                }else {
                    this.monitorList = JSON.parse(JSON.stringify(this.monitorTotalList));
                }
            },
            // 初始化视频流
            initFlvPlayer(centeredVideo, url, monitorIndex, hd) {
                if(!url) {
                    return this.$message.warning('暂不支持flv格式')
                }
                var mediaDataSource = {
                    cors: true,
                    type: 'flv',
                    isLive: true,
                    withCredentials: false,
                    hasAudio: false,
                    hasVideo: true,
                    // url: `${this.$IMGURL}/api/v2/security/preview.flv?camera_id=${camera_id}`,
                    url: url
                };
                var player = flvjs.createPlayer(mediaDataSource, {
                    isLive: true,
                    enableStashBuffer: false,
                    autoCleanupMaxBackwardDuration: 60,
                    autoCleanupMinBackwardDuration: 30,
                    statisticsInfoReportInterval: 1000,
                    stashInitialSize: 128 * 1024,
                    enableDurationMonitor: true,
                    enableVideoFrozenMonitor: true,
                    decreaseDurationStep: 2
                });
                player.on(flvjs.Events.VIDEO_FROZEN, (res) => {
                    if(hd) {
                        if(this.monitorer) {
                            this.pausemix();
                        }
                        this.monitorer = this.initFlvPlayer(centeredVideo, url, monitorIndex, hd);
                    }else {
                        console.log('--== frozen ==--', res);
                        if(this.player[monitorIndex]) {
                            this.pausemix(this.player, monitorIndex);
                        }
                        this.player[monitorIndex] = this.initFlvPlayer(centeredVideo, url, monitorIndex);
                    }
                });
                player.on(flvjs.Events.ERROR, (error) => {
                    console.log('--------error-------', error);
                    if(hd) {
                        if(this.monitorer) {
                            this.pausemix();
                        }
                        if(error === 'MediaError') {            //视频错误
                            setTimeout(() => {
                                this.$set(this, 'monitorLoading', "error");
                            }, 100)
                        }else {
                            this.monitorer = this.initFlvPlayer(centeredVideo, url, monitorIndex, hd);
                        }
                    }else {
                        if(this.player[monitorIndex]) {
                            this.pausemix(this.player, monitorIndex);
                        }
                        if(error === 'MediaError') {           //视频错误
                            setTimeout(() => {
                                this.$set(this.monitorArr[monitorIndex], 'isLoading', 'error');
                            }, 100)
                        }else {
                            this.player[monitorIndex] = this.initFlvPlayer(centeredVideo, url, monitorIndex);
                        }
                    }
                })
                player.attachMediaElement(centeredVideo);
                player.load();
                let playPromise = player.play()
                if (playPromise !== undefined) {
                    playPromise.then((e) => {
                        if(hd) this.monitorLoading = false;
                        else this.monitorArr[monitorIndex].isLoading = false;
                    }).catch((e)=> {
                        console.log(e)
                    })
                }
                return player
            },
            // 视频销毁
            pausemix(flvPlayer, index) {
                if(!flvPlayer) {
                    this.monitorer.pause();
                    this.monitorer.unload();
                    this.monitorer.detachMediaElement();
                    this.monitorer.destroy();
                    this.monitorer = null;
                }else {
                    if(flvPlayer[index]) {
                        flvPlayer[index].pause();
                        flvPlayer[index].unload();
                        flvPlayer[index].detachMediaElement();
                        flvPlayer[index].destroy();
                        this.$set(flvPlayer, `${index}`, null);
                    }
                }
            },
            // 选择监控点
            monitorBtn(item) {
                if(this.monitorIndex!=='') {
                    //是否选中，没选中直接填充进右侧监控区域
                    if(!this.monitorObj[item.camera_id]) {
                        // 没有选中判断监控区域是否已有其他监控点
                        if(this.monitorArr[this.monitorIndex] && this.monitorArr[this.monitorIndex].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                            this.pausemix(this.player, this.monitorIndex);
                            this.$set(this.monitorObj, `${item.camera_id}`, true);
                            this.$set(this.monitorArr, `${this.monitorIndex}`, {isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr});
                            let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                            let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, this.monitorIndex);
                            this.player[this.monitorIndex] = player;
                        }else {
                            this.$set(this.monitorObj, `${item.camera_id}`, true);
                            this.$set(this.monitorArr, `${this.monitorIndex}`, {isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr});
                            let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                            let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, this.monitorIndex);
                            this.player[this.monitorIndex] = player;
                        }
                    }else {
                        if(this.monitorArr[this.monitorIndex] && this.monitorArr[this.monitorIndex].camera_id) {
                            // 已选中，如果当前选中的监控点与右侧监控区域一致，则取消
                            if(item.camera_id === this.monitorArr[this.monitorIndex].camera_id) {
                                this.$set(this.monitorObj, `${item.camera_id}`, false);
                                this.$set(this.monitorArr, `${this.monitorIndex}`, {isLoading: false, camera_id: null, live_addr: null});
                                this.pausemix(this.player, this.monitorIndex);
                            }else {
                                // 如果当前选中的监控点与右侧监控区域不一致，则循环找出一样的监控点，取消原来的移至新
                                let index = this.monitorArr.findIndex((v) => {
                                    if(v && v.camera_id) {
                                        return v.camera_id === item.camera_id;
                                    }
                                })
                                this.pausemix(this.player, index);
                                this.pausemix(this.player, this.monitorIndex);
                                this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                                this.$set(this.monitorArr, `${index}`, {isLoading: false, camera_id: null, live_addr: null});
                                this.$set(this.monitorArr, `${this.monitorIndex}`, {isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr});
                                let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                                let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, this.monitorIndex);
                                this.player[this.monitorIndex] = player;
                            }
                        }else {
                            // 如果当前选中的监控点与右侧监控区域不一致，则循环找出一样的监控点，取消原来的移至新
                            let index = this.monitorArr.findIndex((v) => {
                                if(v && v.camera_id) {
                                    return v.camera_id === item.camera_id;
                                }
                            })
                            this.pausemix(this.player, index);
                            // this.$set(this.monitorObj, `${this.monitorArr[this.monitorIndex].camera_id}`, false);
                            this.$set(this.monitorArr, `${index}`, {isLoading: false, camera_id: null, live_addr: null});
                            this.$set(this.monitorArr, `${this.monitorIndex}`, {isLoading: true, camera_id: item.camera_id, live_addr: item.live_addr});
                            let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                            let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, this.monitorIndex);
                            this.player[this.monitorIndex] = player;
                        }
                    }
                }else {
                    this.$message.warning('请选择右侧视频放置区域');
                }
            },
            // 画面分割
            segmentationBtn(val) {
                if(val > this.segmentation) {
                    for(let i=0;i<val - this.segmentation;i++) {
                        this.monitorArr.push({
                            isLoading: false,
                            camera_id: null,
                            live_addr: null
                        });
                        this.player.push(null);
                    }
                }else if(val < this.segmentation) {
                    for(let i=this.segmentation - val-1;i< this.segmentation;i++) {
                        if(this.monitorArr[i] && this.monitorArr[i].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                            this.$set(this.monitorArr, `${i}`, {isLoading: false, camera_id: null, live_addr: null});
                            this.pausemix(this.player, i);
                        }
                    }
                    this.monitorArr = this.monitorArr.splice(0, val);
                }
                this.monitorIndex = '';
                this.segmentation = val;
            },
            // 选择画面
            monitorItemBtn(index) {
                this.monitorIndex = index;

            },
            // 播放失败，重新播放
            retry(item, index) {
                this.monitorIndex = index;
                this.$set(this.monitorArr[index], 'isLoading', true);
                let centeredVideo = document.getElementById(`video${this.monitorIndex}`);
                let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, this.monitorIndex);
                this.player[this.monitorIndex] = player;
            },
            // 双击选中放大
            monitorCheck(item) {
                if(item && item.camera_id) {
                    this.live_addr = item.live_addr;
                    this.isShow = true;
                    this.monitorLoading = true;
                    this.$nextTick(() => {
                        let centeredVideo = document.getElementById('monitor0');
                        let player = this.initFlvPlayer(centeredVideo, `${item.live_addr?item.live_addr.flv:null}`, 0,'hd');
                        this.monitorer = player;
                    })
                }
            },
            closeMonitor() {
                if(this.isShow && this.monitorer) {
                    this.pausemix();
                    this.isShow = false;
                    this.monitorLoading = false;
                }else {
                    this.isShow = false;
                    this.monitorLoading = false;
                }
            },
            monitorRetry() {
                this.monitorLoading = true;
                this.$nextTick(() => {
                    let centeredVideo = document.getElementById('monitor0');
                    let player = this.initFlvPlayer(centeredVideo, `${this.live_addr?this.live_addr.flv:null}`, 0, 'hd');
                    this.monitorer = player;
                })
            },
            // 选择方案
            checkPlan(item, index) {
                if(item) {
                    this.planInfo = item;
                    this.hideDropdown = true;
                    this.monitorIndex = '';
                    for(let i=0;i< this.segmentation;i++) {
                        if(this.monitorArr[i] && this.monitorArr[i].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                            this.$set(this.monitorArr, `${i}`, {camera_id: null, isLoading: false, live_addr: null});
                            this.pausemix(this.player, i);
                        }
                    }
                    if(item.monitor_list) {
                        this.segmentation = item.monitor_list ? item.monitor_list.length : 4;
                        this.monitorArr.length = this.segmentation;
                        this.player.length = this.segmentation;
                        this.$nextTick(() => {
                            item.monitor_list.forEach((v, i) => {
                                if(v!== "None" && v) {
                                    this.$set(this.monitorArr, `${i}`, {isLoading: true, camera_id: v});
                                    this.$set(this.monitorObj, `${v}`, true);
                                    let centeredVideo = document.getElementById(`video${i}`);
                                    let player = this.initFlvPlayer(centeredVideo, `${v}`, i);
                                    this.player[i] = player;
                                }
                            })
                        })
                    }
                }else {
                    this.planInfo = '';
                    // this.planIndex = '';
                    this.monitorIndex = '';
                    this.hideDropdown = true;
                    this.segmentation = 4;
                    for(let i=0;i< this.monitorArr.length;i++) {
                        if(this.monitorArr[i] && this.monitorArr[i].camera_id) {
                            this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                            this.$set(this.monitorArr, `${i}`, {isLoading: false, camera_id: null, live_addr: null});
                            this.pausemix(this.player, i);
                        }
                    }
                    this.monitorArr.length = this.segmentation;
                    this.player.length = this.segmentation;
                }
            },
            // 编辑方案名称
            editPlan(item, index) {
                this.hideDropdown = false;
                this.dialogVisible = true;
                this.planEdit = true;
                this.planInfo = item;
                this.planIndex = index;
                this.plan.name = item.name;
                this.$nextTick(() => {
                    this.$refs.plan.clearValidate();
                })
            },
            // 新增或修改方案
            savePlanConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let bool = this.planList.some(v => {
                            return v.name === this.plan.name;
                        })
                        if(bool) {
                            this.$message.warning(`${this.plan.name}已存在`);
                            return false;
                        }
                        if(this.planEdit) {
                            this.dialogLoading = true;
                            this.$http.patch(`/api/v1/security/plan/${this.planInfo.id}`, {
                                name: this.plan.name,
                            })
                            .then(() => {
                                this.$message.success('修改成功');
                                this.planList[this.planIndex].name = this.plan.name;
                                this.dialogLoading = false;
                                this.dialogVisible = false;
                            })
                            .catch(() => {
                                this.dialogLoading = false;
                            })
                        }else {
                            this.savePlanFun('post');
                        }
                    }
                });
            },
            savePlanFun(val) {
                let temp = 1;
                switch(this.segmentation) {
                    case 4:
                        temp = 1;
                    break;
                    case 9:
                        temp = 2;
                    break;
                    case 16:
                        temp = 3;
                    break;
                    case 25:
                        temp = 4;
                    break;
                }
                this.dialogLoading = true;
                let arr = [];
                for(let i=0;i< this.monitorArr.length;i++) {
                    if(this.monitorArr[i] && this.monitorArr[i].camera_id) arr.push(this.monitorArr[i].camera_id);
                    else arr.push(null)
                }
                // if(val === 'post') {
                    // this.$http[val]('/api/v1/security/plan/', {
                    //     name: this.plan.name,
                    //     plan: temp,
                    //     monitor_list: arr
                    // })
                    // .then((res) => {
                    //     this.$message.success('方案保存成功');
                    //     this.planList.push(res.data);
                    //     this.dialogVisible = false;
                    //     this.dialogLoading = false;
                    // })
                    // .catch(() => {
                    //     this.dialogLoading = false;
                    // })
                // }else {
                    // this.$http[val](`/api/v1/security/plan/${this.planInfo.id}`, {
                    //     name: this.planInfo.name,
                    //     plan: temp,
                    //     monitor_list: arr
                    // })
                    // .then((res) => {
                    //     this.$message.success('方案更新成功');
                    //     this.dialogVisible = false;
                    //     this.dialogLoading = false;
                    //     this.$set(this.planList, `${this.planIndex}`, res.data);
                    // })
                    // .catch(() => {
                    //     this.dialogLoading = false;
                    // })
                // }
            },
            // 删除方案
            delPlan(item, index) {
                this.hideDropdown = false;
                this.$confirm(`确定要删除‘${item.name}’吗？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    // this.$http.delete(`/api/v1/security/plan/${item.id}`)
                    // .then(res => {
                    //     this.$message.success("删除成功");
                    //     this.planList.splice(index, 1);
                    //     if(item.id === this.planInfo.id) {
                    //         for(let i=0;i< this.monitorArr.length;i++) {
                    //             if(this.monitorArr[i]) {
                    //                 this.monitorArr[i] = {isLoading: false, camera_id: null, live_addr: null};
                    //                 this.pausemix(this.player, i);
                    //                 this.$set(this.monitorObj, `${this.monitorArr[i].camera_id}`, false);
                    //             }
                    //         }
                    //         this.monitorArr.length = 4;
                    //         this.player.length = 4;
                    //         this.segmentation = 4;
                    //         this.planInfo = '';
                    //     }
                    // })
                    // .catch(() => {});
                })
                .catch(() => {});
            },
            // 保存方案
            savePlan() {
                let bool = this.monitorArr.some((item) => {
                    return item && item.camera_id;
                })
                if(!bool) {
                    this.$message.warning('请选择监控点');
                    return false;
                }
                if(this.planInfo) {
                    //更新方案
                    this.$confirm(`确定确认更新？`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        this.savePlanFun('put');
                    })
                    .catch(() => {});
                }else {
                    this.dialogVisible = true;
                    this.$nextTick(() => {
                        this.$refs.plan.resetFields();
                    })
                    this.planEdit = false;
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .video-preView {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .video-tree {
            width: 300px;
            display: inline-block;
            vertical-align: top;
            height: 100%;
            overflow: auto;
            .video-tree-input {
                display: flex;
            }
            .video-device {
                width: 100%;
                display: flex;
                align-items: center;
                border: 1px solid #e5e5e5;
                box-sizing: border-box;
                .video-sum-device {
                    padding: 0 12px;
                    box-sizing: border-box;
                }
                .video-device-list {
                    border-left: 1px solid #e5e5e5;
                    box-sizing: border-box;
                    padding: 6px 0 ;
                    &>div {
                        padding: 6px 12px;
                        box-sizing: border-box;
                    }
                }
            }
            .monitor-ul {
                width: 100%;
                .monitor-item, .monitor-item-active {
                    width: 100%;
                    padding: 8px 24px;
                    box-sizing: border-box;
                    cursor: pointer;
                }
                .monitor-item-active {
                    color: #409EFF;
                }
            }
            ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                color: #409EFF;
            }
        }
        .video-play {
            width: calc(100% - 300px);
            overflow: auto;
            padding-left: 20px;
            .video-play-select {
                width: 100%;
                display: flex;
                justify-content: space-between;
                .select-main {
                    ::v-deep .el-button:active {
                        color: #333;
                        border-color: #dcdfe6;
                    }
                    ::v-deep .el-button:hover {
                        color: #333;
                        border-color: #dcdfe6;
                        background-color: #fff;
                    }
                    ::v-deep .el-button:focus {
                        color: #333;
                        border-color: #dcdfe6;
                        background-color: #fff;
                    }
                }
            }
            .video-list {
                width: 100%;
                height: calc(100% - 122px);
                margin-top: 20px;
                position: relative;
                ::v-deep .monitor {
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 20002;
                    .el-icon-close {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        cursor: pointer;
                        color: #fff;
                        z-index: 2001;
                        font-size: 36px;
                    }
                    .monitor-error {
                        color: #fff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        cursor: pointer;
                    }
                }
            }
            .picture-segmentation {
                display: flex;
                justify-content: flex-end;
                .segmentation-icon {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    &>i {
                        font-size: 40px;
                    }
                }
            }
        }
    }
    .dropdown-item, .dropdown-item-active {
        min-width: 150px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dropdown-item-icons {
            display: flex;
            align-items: center;
            &> i {
                font-size: 18px;
            }
            .el-icon-delete {
                margin: 0;
            }
        }
    }
    .dropdown-item-active {
        color: #409eff;
    }
    .division {
        width: 40px;
        height: 40px;
        border-left: 1px solid #777;
        border-bottom: 1px solid #777;
        box-sizing: border-box;
        cursor: pointer;
    }
    .division-two, .division-three, .division-four, .division-five {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        &>div {
            width: 50%;
            height: 50%;
            background: #333;
            border-top: 1px solid #777;
            box-sizing: border-box;
            border-right: 1px solid #777;
            cursor: pointer;
            position: relative;
        }
        .division-item-tips {
            color: #777;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background: #333;
        }
        .monitor-item-active {
            border: 1px solid red;
        }
        .monitor-after-none::after {
            content: '';
        }
        .video-error {
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            display: flex;
            z-index: 20001;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
    }
    .division-three {
        &>div {
            width: 33.33%;
            height: 33.33%;
        }
    }
    .division-four {
        &>div {
            width: 25%;
            height: 25%;
        }
    }
    .division-five {
        &>div {
            width: 20%;
            height: 20%;
        }
    }
    .division-main {
        display: flex;
        justify-content: space-between;
        &>div {
            &>div {
                &>div::after {
                    content: '' !important;
                }
            }
        }
    }
    ::v-deep .vjs-fluid {
        height: 100%;
        padding-top: 0;
        overflow: hidden;
    }
    ::v-deep .video-js {
        width: 100%;
        height: 100%;
    }
</style>
